<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home/wellcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商家管理</el-breadcrumb-item>
            <el-breadcrumb-item>商家列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card class="box-card">
            <!-- 头部标签 -->
            <div slot="header" class="clearfix">
                <span><i class="el-icon-menu">操作面板</i></span>
                <router-link to="/home/businessAdd">
                    <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-circle-plus-outline"
                   >新增商家</el-button>
                </router-link>
            </div>
            <!-- 关键字搜索框 -->
            <div class="demo-input-suffix">
                <el-input placeholder="请输入商家名称" prefix-icon="el-icon-search" v-model="searchForm.keywords"
                    style="width:200px; margin-right:10px;" size="small"></el-input>
                <el-button type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
            </div>
            <template>
                <el-table :data="tableData" stripe style="width: 100%; margin-top:8px;">
                    <el-table-column prop="b_img" label="商家照片" width="140px">
                        <template slot-scope="scope">
                            <el-image :src="scope.row.b_img" style="width:60px;height:60px;" fit="contain "></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="b_name" label="商家名称" width="120px"></el-table-column>
                    <el-table-column prop="b_price" label="商家价格" width="120px">
                        <template slot-scope="scope">
                            <el-tag type="success">￥{{ scope.row.b_price }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="b_JS" label="商家面积" width="120px">
                        <template slot-scope="scope">
                            <el-tag type="success">{{ scope.row.b_JS }}m²</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="b_score" label="商家评分" width="120px">
                        <template slot-scope="scope">
                            <el-tag type="danger" size="small">{{ scope.row.b_score }}分</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="b_offer" label="提供服务" width="200px"></el-table-column>
                    <el-table-column prop="b_city_detail" label="商家地址"></el-table-column>
                    <el-table-column label="操作" width="180" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button size="small" icon="el-icon-edit"
                                @click="handleClick(scope.row, 'update')">编辑</el-button>
                            <el-button type="danger" size="small" icon="el-icon-delete"
                                @click="handleClick(scope.row, 'delete')">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <!-- 分页组件 -->
            <div class="page-box" style="text-align:right; margin-top:20px">
                <el-pagination background layout="prev, pager, next" :total="total" :pager-count="5" :page-size="pageSize"
                    @current-change="changePage" :current-page="page"></el-pagination>
            </div>

        </el-card>
    </div>
</template>

<script>
import { getBusiness, delPetBusiness } from '@/http/api'
export default {
    data() {
        return {
            searchForm: {
                keywords: ''
            },
            page: 1,   // 当前页码
            pageSize: 4, // 每页显示条数
            tableData: [],  // 表格数据
            total: 0,   // 总条数
        }
    },
    methods: {
        // 获取商家列表+模糊查询
        search() {
            let params = {
                page: this.page,
                pageSize: this.pageSize,
            }
            // 校验搜索关键字
            let keywords = this.searchForm.keywords.trim()
            if (keywords && keywords.length > 0) {
                params['keywords'] = keywords
            }
            getBusiness(params).then(res => {
                console.log(res.data.data)
                if (res?.data?.code == 200) {
                    this.page = res?.data?.data?.page
                    this.pageSize = res?.data?.data?.pageSize
                    this.tableData = res?.data?.data?.result
                    this.total = res?.data?.data?.total
                }

            }).catch(err => {
                this.$message.error(err)
            })
        },
        // 改变页码，再次请求
        changePage(page) {
            console.log(page);
            this.page = page
            this.search()
        },
        // 删除和编辑
        handleClick(row, status) {
            console.log(row.b_id);
            console.log(status);
            let b_id = row.b_id
            switch (status) {
                case 'update':
                    this.$router.push({
                        url: '/home/businessUpdate',
                        name: 'basinessUpdate',
                        query: b_id
                    })
                    break
                case 'delete':
                    this.$confirm('是否确认删除这条商家信息？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // 删除实现
                        delPetBusiness({ b_id }).then(res => {
                            if (res.data.code == 200) {
                                this.$message.success(res.data.msg)
                                this.search()
                            }
                        })
                    })
            }
        }


    },
    created() {

    },
    mounted() {
        this.search()
    }

}
</script>

<style scoped>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 100%;
}

.el-breadcrumb {
    margin-bottom: 20px;
}
</style>